<template>
	<div style="position: relative" ref="echartsRef" :style="{ height: props.height + 'px' }" />
</template>

<script lang="ts" setup>
import { nextTick, onBeforeUnmount, onMounted, PropType, ref } from 'vue';
import { EChartsOption } from 'echarts';
import * as echarts from 'echarts';

const echartsRef = ref();
let charts: any;
const emits = defineEmits(['click']);
const props = defineProps({
	height: {
		type: Number,
		default: 400
	},
	card: {
		type: Boolean,
		default: true
	},
	option: {
		type: Object,
		default: () => {
			return {};
		}
	}
});
const resize = () => {
	charts.resize();
};
const clear = () => {
	charts.clear();
};
onMounted(() => {
	window.addEventListener('resize', resize);
	nextTick(() => {
		charts = echartsRef.value && echarts.init(echartsRef.value, 'light');
		charts.on('click', function (params: any) {
			emits('click', params);
		});
		console.log(props.option);
		charts.setOption(props.option as EChartsOption);
		resize();
	});
});

onBeforeUnmount(() => {
	window.removeEventListener('resize', resize);
});
const setOption = (option: EChartsOption) => {
	charts.setOption(option);
};
defineExpose({
	setOption,
	clear
});
</script>
<style scoped></style>
